<script setup>
import {nextTick, onMounted, ref} from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute() // 获取当前路由信息
const routeName = route.meta.name
const routeall = route.meta.describe


import { getMenuList , UpdatePermissions, getPermissions} from '@/api/index.js'


// 切换添加权限、编辑权限名称
const title = ref('添加权限')

// 获取菜单权限数据
onMounted(async () => {
  const res = await getMenuList()
  menuList.value = res.data.data
  getMenudata()
})




// 菜单权限数据
const menuList = ref([])

// 选中的权限
const defaultkeys = [4, 5]
const treeRef = ref()


const formRef = ref()

const dialongformvisible = ref(false)


// 表单校验
const rules = {
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
  ],
}


// 表单提交
const confirm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid,fields) => {
    if (valid) {
      const str = JSON.stringify(treeRef.value.getCheckedKeys())
      UpdatePermissions(form.value.name,str,form.value.id)
      alert('成功！！！')
      beforeClose()
      getMenudata()
    }else {
      console.log('error submit!',fields)
    }
  })
}


// form数据
const form = ref({
  id: '',
  name: '',
  permissions: '',
})

// 关闭弹窗的回调
const beforeClose = () => {
  dialongformvisible.value = false
  // 重置表单数据
  formRef.value.resetFields()
  // 手动设置tree数据
  treeRef.value.setCheckedKeys(defaultkeys)
}

//
const missions = ref({
  pageNum:1,
  pageSize:10
})



// 分页
const handleSizeChange = (val) => {
  missions.value.pageSize = val
  getMenudata()
}
const handleCurrentChange = (val) => {
  missions.value.pageNum = val
  getMenudata()
}



// 定义表格数据
const tableData1 = ref({
  list: [],
  total: 0
})



// 获取菜单权限
const getMenudata = async () => {
  const res = await getPermissions(missions.value.pageNum,missions.value.pageSize)
  const {list,total} = res.data.data
  tableData1.value = {
    list,
    total
  }
}


// 编辑 菜单权限
const deleteRow = (row = {}) => {
  dialongformvisible.value = true
  title.value = '编辑菜单权限'
  nextTick(()=>{
    if (row) {
      form.value = {
        id:row.id,
        name:row.name,
      }
      treeRef.value.setCheckedKeys(row.permission)
    }
  })
}



// 菜单按钮
const caidan = () => {
  dialongformvisible.value = true
  title.value = '菜单权限'
}


</script>

<template>
  <panelHead :routeName = "routeName" :routeall = "routeall" ></panelHead>
  <div class="btn"><el-button type="primary" @click="caidan">添加权限</el-button></div>
  <el-table :data="tableData1.list" style="width: 100%" max-height="350">
    <el-table-column fixed prop="id" label="id" width="250" />
    <el-table-column prop="name" label="名称" width="350" />
    <el-table-column prop="permissionName" label="菜单权限" width="600" />
    <el-table-column fixed="right" label="Operations" min-width="140">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.row)"
        >
          编辑
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-info">
    <el-pagination
      v-model:current-page="missions.pageNum"
      :page-size="missions.pageSize"
      :background="false"
      size="small"
      layout="total, prev, pager, next"
      :total="tableData1.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog
  v-model="dialongformvisible"
  :before-close="beforeClose"
  :title="title"
  width="500"
  >
    <el-form
    ref="formRef"
    label-width="100px"
    label-position="left"
    :model="form"
    :rules="rules"
    >
      <el-form-item v-show="false"  prop="id">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请填写权限名称"></el-input>
      </el-form-item>
      <el-form-item label="权限" prop="permissions">
        <el-tree
            ref="treeRef"
            style="max-width: 600px;"
            :data="menuList"
            node-key="id"
            show-checkbox
            :default-checked-keys="defaultkeys"
            :default-expanded-keys="[2]"
        />

      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirm(formRef)">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
  .btn{
    background-color: #fff;
    padding: 20px 0px 15px 10px;
  }
</style>
